<template>
<div>
  <div class="guide">
    <van-nav-bar title="穷游锦囊" left-arrow @click-left="onClickLeft">
      <van-icon name="search" slot="right" />
    </van-nav-bar>
    <van-search
      v-model="value"
      show-action
      placeholder="搜索你想要的锦囊"
      @click="ontz"
      @search="onSearch"
      @cancel="onCancel"
    />
      </div>

<div>
    <ul class="guiList">
      <li
        v-for="(val,index) in list2"
        :key="index"
        :class="{current:num==index}"
        @click="getLi(index,val)"
      >
        <span class="bor"></span>
        <span class="guititle">{{val}}</span>
      </li>
    </ul>
    <div class="imgBox">
      <van-grid :column-num="3">
        <van-grid-item v-for="(ele,index) in list" :key="index">
          <van-icon :name="ele.gurl" size="2rem" />
          <h3 class="gridh3">{{ele.staten}}</h3>
          <p class="locate">{{ele.gname}}</p>
        </van-grid-item>
      </van-grid>
    </div>
</div>
<!-- continent 洲 
      "热门","亚洲","欧洲","北美洲","南美洲","大洋洲","非洲","南极洲"
-->
</div>
  
</template>
<script>
export default {
  data() {
    return {
      value:"",
      num: 0,
      continent:"热门",
      list2:["热门","亚洲","欧洲","北美洲","南美洲","大洋洲","非洲","南极洲"],
      list:[],
      goodslist:[],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSearch() {
    
    },
    onCancel() {
    },
    ontz(){
  this.$router.push("tz");
    },
    getLi(index,continent) {
      this.num = index;
      this.continent = continent;
      this.getlistname();
    },
     async getlistname() {
      let { data } = await this.$axios.get("http://localhost:1920/goods/list",{
        params:{
          continent:this.continent
        }
      });
      this.list = data;
    },
  },
  created(){
    this.getlistname();
  }
};
</script>
<style lang="scss" scoped>
.guide {
  width: 100%;
  background-color: #ecece5;
  .van-nav-bar {
    background-color: #252525;
  }
  .van-nav-bar__title {
    color: white;
  }
  .van-icon {
    color: white;
  }
  .van-search {
    background-color: #ecece5;
  }
  .van-search__content {
    background-color: white;
  }
}
 .guiList {
    background: #fff;
    width: 100%;
    font-size: 0.32rem;
    height: 1.8rem;
    margin: 0 0 0.2rem;
    li {
      position: relative;
      box-sizing: border-box;
      float: left;
      width: 25%;
      height: 0.9rem;
      padding: 0.17rem 0;
      text-align: center;
      border-bottom: 1px solid #e7e7e7;
      .guititle {
        display: inline-block;
        padding: 0.1rem 0.25rem;
      }
      .bor {
        position: absolute;
        left: 1.88rem;
        top: 11px;
        display: block;
        width: 1px;
        height: 22px;
        background: #e7e7e7;
      }
    }
    .current {
      .guititle {
        border-radius: 3px;
        background: #ed323c;
        color: #fff;
      }
    }
  }
    .imgBox {
    width: 95%;
    margin: 0 auto;
    
  .gridh3 {
    padding-top: 5px;
    font-size: 13px;
    color: #2c2c2c;
  }
  .locate {
    font-size: 11px;
    line-height: 15px;
    color: #939393;
  }
  }
</style>